<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div style="margin: 20px;">
	<a id="func-btn-root-add" href="#" class="easyui-linkbutton" onclick="javascript:func.addRootfunc()"
	data-options="iconCls:'icon-add'">添加根功能(顶级功能)</a>
</div>

<div style="margin: 20px;">
	<ul id="func-func-tree" class="easyui-tree" data-options="url:'/function/list',method:'get'"></ul>  
</div>

<%--右键功能定义如下： --%>
<div id="func-cxm-menu" class="easyui-menu" style="width:120px;">
	<div onclick="func.append()" data-options="iconCls:'icon-add'">追加</div>
	<div onclick="func.update()" data-options="iconCls:'icon-edit'">修改</div>
	<div onclick="func.remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>

<script type="text/javascript">
	var func = {};
	//添加根节点
	func.addRootfunc = function(){
		$.messager.prompt('输入功能名称', '请输入你的功能名称', function(name){
			name = $.trim(name);
			if (name){
				$.ajax({
					type : "POST",
					url : "/function/add",
					data : "pid=0&name="+name,
					dataType : "json",
					success : function(msg) {
						if (msg.status == 200) {
							//弹出成功提示框
							$.messager.alert('操作提示', '添加成功！', 'info');
							//刷新功能
							$('#func-func-tree').tree('append', {
								data: [{
									id: msg.data.id,
									text: msg.data.name,
									state: 'closed'
								}]
							});
						}
					}
				});
				
			}else{
				alert('功能名称不能为空！！');
			}
		});
	}
	
	func.append = function(){
		//判断是否叶子节点
		//先获取节点
		var node = $('#func-func-tree').tree('getSelected');
		if($('#func-func-tree').tree('isLeaf',node.target)){
			$.messager.alert('提示','该功能不是父功能，不能添加子功能！','warning');
			return;
		}
		//弹出添加页面
		$('<div id="func-dialog-add"></div>').dialog({    
		    title: '添加功能',    
		    width: 400,    
		    height: 200,    
		    closed: false, 
		    closable:false,
		    cache: false,    
		    href: '/function/add',    
		    modal: true,
		    buttons:[{
				text:'添  加',
				iconCls:'icon-add',
				handler:function(){
					$('#func-form-add').form('submit', {    
					    url:'/function/add',   
					    onSubmit: function(params){
					    	params.pid = node.id;
					    	return func.check('func-form-add');
					    },  
					    success:function(msg){ 
					    	msg = eval('(' + msg + ')');  
					        //添加角色后，返回结果
					        if(msg.status==200){
					        	//关闭窗口
					        	$('#func-dialog-add').dialog('destroy');  
					        	//弹出成功提示框
					        	$.messager.alert('操作提示','添加成功！'+msg.data.id,'info');
					        	//追加节点
					        	// 追加若干个节点并选中他们
								$('#func-func-tree').tree('append', {
									parent: node.target,
									data: [{
										id: msg.data.id,
										text: msg.data.name,
										state: msg.data.url==null ?  'closed':'open'
									}]
								});

					        	//清空
					        	func.clearAddForm();
					        }
					    }    
					});
				}
			},{
				text:'关  闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#func-dialog-add').dialog('destroy');  
				}
			}]
		});    

	}
	//打开修改功能窗口
	func.update = function(){
			//功能节点
			var node = $('#func-func-tree').tree('getSelected');
			
			$('<div id="func-dialog-update"></div>').dialog({
				title:'修改功能',
			    width:300,    
			    height:200,    
			    modal:true,
			    collapsible:false,
			    minimizable:false,
			    maximizable:false,
			    closable:false,
			    href:"/function/update/"+node.id,
			    buttons:[{
					text:'修   改',
					iconCls:'icon-edit',
					handler:function(){
						$('#func-form-update').form('submit', {    
						    url:'/function/update',      
						    success:function(msg){ 
						    	msg = eval('(' + msg + ')');  
						        //添加功能后，返回结果
						        if(msg.status==200){
						        	if (node){
						        		$('#func-func-tree').tree('update', {
						        			target: node.target,
						        			text: msg.data.name,
						        			state: msg.data.url ? 'closed':'open'
						        		});
						        	}
						        	//弹出成功提示框
						        	$.messager.alert('操作提示','修改成功！','info');
						        	//关闭窗口
						        	$('#func-dialog-update').dialog('destroy');
						        	
						        }
						    }    
						});
					}
				},{
					text:'关  闭',
					iconCls:'icon-cancel',
					handler:function(){
						$('#func-dialog-update').dialog('destroy');  
					}
				}]
			}); 
		}
	
	//删除
	func.remove = function(){
		//功能节点
		var node = $('#func-func-tree').tree('getSelected');
		//删除确认
		$.messager.confirm('删除确认', '您确认要删除【'+node.text+'】功能吗？', function(r) {
			if (r) {
				$.ajax({
					type : "POST",
					url : "/function/delete",
					data : "id=" + node.id,
					dataType : "json",
					success : function(msg) {
						if (msg.status == 200) {
							//弹出成功提示框
							$.messager.alert('操作提示', '删除成功！', 'info');
							//刷新功能
							$('#func-func-tree').tree('remove',node.target);
						}
					}
				});
			}
		});
	}
	
	//验证方法,此处适用修改和添加验证，方法参数是各自表单的id,如果是修改
	func.check = function(formId,orignal_name,pid){
		//验证表单元素
  		var $input_func_name = $('#'+formId+' input[name=name]');
  		var func_name = $.trim($input_func_name.val());
  		
  		//定义表单参数,默认是添加的参数
  		var node = $('#func-func-tree').tree('getSelected');
       	var params = "name="+func_name+"&pid="+node.id;
  		
       	if(func_name==''){
       		$input_func_name.focus();
       		//显示错误信息
       		$('#'+formId+' #func-name-tip').html('<span style="color:red;">功能名称不能为空</span>');
        	return false;
       	}else{
       		//如果是修改操作，当修改后的名称和修改前相同时，不做唯一性验证
       		if(formId=='func-form-update'){
       			//使用节点的pid作为查询参数
       			params = "name="+func_name+"&pid="+pid;
       			
       			//判断是否相同
       			if(func_name==orignal_name){
       				//给个提示，名称没有修改
       				$('#'+formId+' #func-name-tip').html('<span style="color:blue;">名称没有修改</span>');
       				return true;
       			}
       		}
       		$('#'+formId+' #func-name-tip').html('');
       		var flag = false;
       		
       		
        	//进行唯一性验证，使用ajax查询数据库
       		$.ajax({
       		   type: "get",
       		   url: "/function/name/check",
       		   data: params,
       		   dataType: "json",
       		   async:false,
       		   success: function(msg){
       		     //如果成功
       		     if(msg.status==200 && msg.data){
       		    	$('#'+formId+' #func-name-tip').html('<span style="color:red;">该功能名称已被使用</span>');
       		     }else{
       		    	$('#'+formId+' #func-name-tip').html('<span style="color:green;">该功能名称可以使用</span>');
       		    	flag = true;
       		     }
       		   }
       		});
        	return flag;
        }
	};
	//清空表单元素
	func.clearAddForm = function(){
		$('#func-form-add input').val('');
		$('#func-form-add #func-name-tip').html('');
		$('#func-form-add #func-url-tip').html('父节点不需要输入url,子节点必须输入');
	}
	
	// 右键点击节点并显示快捷功能
	$('#func-func-tree').tree({
		onContextMenu: function(e, node){
			e.preventDefault();
			// 查找节点
			$('#func-func-tree').tree('select', node.target);
			// 显示快捷功能
			$('#func-cxm-menu').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
		}
	});
</script>  